<route lang="json5">
  {
    style: {
      navigationBarTitleText: '注册账号',
    },
  }
  </route>
<template>
  <view class="page">
    <view class="form-container">
      <view class="flex align-center justify-between">
        <view class="title">注册账号</view>
        <view class="register" @click="goLogin">账号已注册,去登录</view>
      </view>
      <view class="form-item">
        <uni-icons type="paperplane" size="20" color="#999" />
        <input type="text" v-model="formData.spread_spid" placeholder="请输入邀请码" class="input" />
      </view>

      <view class="form-item">
        <uni-icons type="person" size="20" color="#999" />
        <input type="text" v-model="formData.nickname" placeholder="请输入昵称" class="input" />
        <text class="tip-text">不能为纯数字</text>
      </view>

      <view class="form-item">
        <uni-icons type="phone" size="20" color="#999" />
        <input type="number" v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" class="input" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.password" placeholder="请输入密码"
          class="input" />
        <uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"
          @click="togglePassword" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPassword ? 'text' : 'password'" v-model="formData.password2" placeholder="请再次输入密码"
          class="input" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPayPassword ? 'text' : 'password'" v-model="formData.pay_password" placeholder="请输入支付密码"
          class="input" />
        <text class="tip-text">6-20位</text>
        <uni-icons :type="showPayPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"
          @click="togglePayPassword" />
      </view>

      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999" />
        <input :type="showPayPassword ? 'text' : 'password'" v-model="formData.pay_password2" placeholder="请再次输入支付密码"
          class="input" />
      </view>

      <button class="submit-btn" @click="handleSubmit">注册</button>

      <view class="agreement">
        <checkbox-group @change="handleCheckboxChange">
          <label class="checkbox-label">
            <checkbox value="1" color="#FF6B44" :checked="formData.agreement"
              style="transform: scale(0.7); border-radius: 50%;" />
          </label>
        </checkbox-group>
        <text class="agreement-text">

          我已阅读并同意</text>
        <text class="agreement-link" @click="openPrivacyPolicy">《隐私政策》</text>
        <text class="agreement-text">和</text>
        <text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref, } from 'vue'
import { postRegisterAPI, } from '@/service/index/index'
import { useUserStore } from '@/store'
import { useRoute } from 'vue-router'
const route = useRoute()
const showPassword = ref(false);
const showPayPassword = ref(false);

const formData = reactive({
  spread_spid: '',
  nickname: '',
  mobile: '',
  password: '',
  password2: '',
  pay_password: '',
  pay_password2: '',
  agreement: false
});

const goBack = () => {
  uni.navigateBack();
};

const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const togglePayPassword = () => {
  showPayPassword.value = !showPayPassword.value;
};

const handleSubmit = () => {
  // if (!formData.spread_spid) {
  //   uni.showToast({ title: '请输入邀请码', icon: 'none' });
  //   return;
  // }
  if (!formData.nickname) {
    uni.showToast({ title: '请输入昵称', icon: 'none' });
    return;
  }
  if (/^\d+$/.test(formData.nickname)) {
    uni.showToast({ title: '昵称不能为纯数字', icon: 'none' });
    return;
  }
  if (!formData.mobile) {
    uni.showToast({ title: '请输入手机号', icon: 'none' });
    return;
  }
  if (!/^1\d{10}$/.test(formData.mobile)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
  if (!formData.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }
  if (formData.password !== formData.password2) {
    uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
    return;
  }
  if (!formData.pay_password) {
    uni.showToast({ title: '请输入支付密码', icon: 'none' });
    return;
  }
  if (formData.pay_password.length < 6 || formData.pay_password.length > 20) {
    uni.showToast({ title: '支付密码长度为6-20位', icon: 'none' });
    return;
  }
  if (formData.pay_password !== formData.pay_password2) {
    uni.showToast({ title: '两次输入的支付密码不一致', icon: 'none' });
    return;
  }
  if (!formData.agreement) {
    uni.showToast({ title: '请阅读并同意用户协议和隐私政策', icon: 'none' });
    return;
  }

  postRegisterAPI({
    ...formData,
    mini_code: openId.value
  }).then((res: LoginResponse) => {
    console.log(res)
    if (res.code === 1) {
      uni.showToast({ title: '注册成功', icon: 'success' });
      useUserStore().setUserInfo(res.data.userinfo)
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/my/index',
        })
      }, 1000)
    } else {
      uni.showToast({ title: res.msg, icon: 'none' });
    }
  });
};

const handleCheckboxChange = (e) => {
  formData.agreement = e.detail.value.length > 0;
};

const openPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/login/privacy'
  });
};

const openUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/login/agareement'
  });
};

// Define the expected response structure
interface LoginResponse {
  code: number
  data?: {
    userinfo?: any // Replace 'any' with the actual type if known
  }
}



const form = reactive({
  fullname: '',
  gender: '',
  mobile: '',
  password: '',
  code: '',
  mini_code: '',
})




const openId = ref('')


const wxlogin = async () => {
  uni.login({
    provider: 'weixin',
    success: function (loginRes) {
      console.log(loginRes)
      openId.value = loginRes.code
    },
  })
}
function getVerificationCode() {
  console.log('Getting verification code...')
}

const serilizeURL = (url) => {
  url = decodeURIComponent(url);
  var rs = url.split("?")[1];
  if (!rs) {
    rs = url;
  }
  rs = rs.replace('scene=', '');
  var arr = rs.split("&");
  var json = {};
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].indexOf("=") != -1) {
      json[arr[i].split("=")[0]] = arr[i].split("=")[1];
    } else {
      json[arr[i]] = "undefined";
    }
  }
  return json;
};

// #ifdef H5
onMounted(() => {

  formData.spread_spid = route.query.code;
  wxlogin()
})
// #endif
// #ifdef MP-WEIXIN
onLoad((options) => {
  // console.log(options)
  // console.log(options.scene)
  if (options.scene) {

    let json = serilizeURL(decodeURIComponent(options.scene))
    formData.spread_spid = json.code
  }
  wxlogin()
})
// #endif

</script>

<style scoped>
page {
  height: 100%;
}


.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  text-align: left;
  margin-left: 10rpx;
  margin-bottom: 30rpx;
}


.page {
  min-height: 100%;
  background-color: #FFFFFF;
  padding: 0 30rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  margin: 0 -30rpx;
}

.nav-left {
  width: 100rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.nav-right {
  width: 100rpx;
  text-align: right;
  font-size: 14px;
  color: #1890ff;
}

.form-container {
  padding-top: 60rpx;
}

.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  border: 1px solid #EEEEEE;
}

.input {
  flex: 1;
  height: 100%;
  margin-left: 20rpx;
  font-size: 14px;
}

.tip-text {
  font-size: 12px;
  color: #999999;
  margin: 0 20rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin-top: 60rpx;
  background: #1890ff;
  border-radius: 45rpx;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
}

.agreement {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  font-size: 20rpx;

}

.agreement-text {
  font-size: 12px;
  color: #999999;
}

.agreement-link {
  font-size: 12px;
  color: #1890ff;
}

.register {
  font-size: 28rpx;
  color: #1890ff;
  font-weight: 500;
}
</style>
